<template>
	<div id="QRcodesGeneration">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<h1><i class="el-icon-lx-cascades"></i> 二维码（将文本生成二维码）</h1>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-row>
			<el-col :span="24" class="qrcol">
				<el-card :body-style="{ padding: '0px' }">
					<el-input type="textarea" :autosize="{ minRows: 9, maxRows: 9}" v-model="QrCodeTextarea" placeholder="请输入内容">
					</el-input>
				</el-card>
			</el-col>
			<el-col :span="3.5" v-for="(value, index) in QrCodes" v-bind:key="index">
				<el-card>
					<div :id="'qrcode' + index" ref="qrcodeContainer"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	export default {
		data: function() {
			return {
				keyword: '',
				QrCodeTextarea: '',
				QrCodeWordsNumberText: '',
				QrCodes: [],
			}
		},
		mounted() { //调用
			this.qrcode();
		},
		methods: {
			qrcode(id,value) {
				let tqrcode = new QRCode(id, {
					width: 200,
					height: 200, // 高度  [图片上传失败...(image-9ad77b-1525851843730)]
					text: value, // 二维码地址 
					render: 'table', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
					background: '#f0f',
					foreground: '#ff0',
					colorDark: "#000",
					colorLight: "#fff",
				})
			},
		},
		watch: {
			// 如果 `question` 发生改变，这个函数就会运行
			QrCodeTextarea: function() {
				this.QrCodes = this.QrCodeTextarea.split(",");
				this.QrCodeWordsNumberText = this.QrCodes
				for (let i = 0; i < this.QrCodes.length; i++) {
					let qr = '#qrcode' + i;
					console.log(qr)
					let qrcodeEL = document.getElementById('qrcode' + i);
					console.log(qrcodeEL)
					// let qrcode = new QRCode(qrcodeEL);
					qrcodeEL.innerHTML = "";
					this.showQRCode = true;
					this.qrcode(qrcodeEL,this.QrCodes[i]);
				}
				// this.QrCodeWordsNumberText = this.QrCodeTextarea.length;
				// this.barcode();
			},
		},
		computed: {
			list() {
				return this.iconList.filter((item) => {
					return item.indexOf(this.keyword) !== -1;
				})
			}
		}
	}
</script>

<style>
	#qrcode {
		display: inline-block;

	}

	#QRcodesGeneration {
width: 100%;
		text-align: center;
	}

	.qrcol {
		border-radius: 4px;
		min-height: 150px;
		/* background-color: #B3E19D; */
	}
</style>
